<!--
 * @Author: YMJ
 * @Date: 2020-10-30 10:27:42
-->
<template>
  <div class="page">
    <div>
      <div class="top flex">
        <span>发布数量</span>
        <div class="tr f1">
          <el-button type="primary"  @click="exportData(dynamicPublishGrow,dynamicPublishData)">导出数据</el-button>
          <div class="sel">
            <span @click="getDynamicCurve('day')">日</span>
            <span class="br" @click="getDynamicCurve('month')">月</span>
            <span @click="getDynamicCurve('year')">年</span>
          </div>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getDynamicCurve()"
          />
        </div>
      </div>
      <el-row class="h1 canvas-box">
        <el-col :span="6" class="flex ac pc h100">
          <div class="flex ver ac pc">
            <span class="s1">动态发布数量</span>
            <span class="s2">{{ totalNum }}</span>
          </div>
          <!-- <span class="s3">环比<i class="el-icon-caret-top s4"></i>12％</span> -->
        </el-col>
        <el-col class="h100" :span="18">
          <div ref="canvas1" class="h100" />
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 30px">
      <div class="top flex">
        <span>数据统计</span>
        <div class="tr f1">
          <el-button type="primary" @click="exportData(dynamicDataGrow,dynamicCurveData)">导出数据</el-button>
          <div class="sel">
            <span @click="getDynamicCurveData('day')">日</span>
            <span class="br" @click="getDynamicCurveData('month')">月</span>
            <span @click="getDynamicCurveData('year')">年</span>
          </div>
          <el-date-picker
            v-model="value2"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getMemberGender()"
          />
        </div>
      </div>
      <el-row class="h1 canvas-box">
        <el-col :span="6" class="flex ver ac pc h100">
          <div class="flex ac pc">
            <div class="flex ver ac pc">
              <span class="s1">浏览数</span>
              <span class="s2">{{ totalBrowse }}</span>
            </div>
            <!-- <span class="s3">环比<i class="el-icon-caret-top s4"></i>12％</span> -->
          </div>
          <div class="flex ac pc" style="margin-top: 20px">
            <div class="flex ver ac pc">
              <span class="s1">点赞数</span>
              <span class="s2">{{ totalComment }}</span>
            </div>
            <!-- <span class="s3">环比<i class="el-icon-caret-top s4"></i>12％</span> -->
          </div>
          <div class="flex ac pc" style="margin-top: 20px">
            <div class="flex ver ac pc">
              <span class="s1">评论数</span>
              <span class="s2">{{ totalForward }}</span>
            </div>
            <!-- <span class="s3">环比<i class="el-icon-caret-top s4"></i>12％</span> -->
          </div>
          <div class="flex ac pc" style="margin-top: 20px">
            <div class="flex ver ac pc">
              <span class="s1">转发数</span>
              <span class="s2">{{ totalLike }}</span>
            </div>
            <!-- <span class="s3">环比<i class="el-icon-caret-top s4"></i>12％</span> -->
          </div>
        </el-col>
        <el-col class="h100" :span="18">
          <div ref="canvas2" class="h100" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { dynamicCurve, dynamicCurveData } from '@/api/member'
import { dynamicXlxsHeader } from './config/total.config'
import { getDay ,exportList } from '@/utils/utils'
export default {
  data() {
    return {
      ...dynamicXlxsHeader(),
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      totalNum: 0,
      totalBrowse: 0,
      totalComment: 0,
      totalForward: 0,
      totalLike: 0,
      age1Num: 0,
      age2Num: 0,
      age3Num: 0,
      areaHtml: '',
      areaList: [],
      areaTotal: 0,
      color: ['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#13c2c2'],
      dynamicPublishData:[],
      dynamicCurveData:[]
    }
  },
  mounted() {
    this.getDynamicCurve('day')
    this.getDynamicCurveData('day')
  },
  methods: {
    // 导出数据
    exportData(header,data){
      exportList(header ,data)
    },
    async getDynamicCurve(type) {
      const params = {}
      if (type) params.type = type
      else params.date = this.value1.join(',')
      const [res] = await this.$async(dynamicCurve, params)
      this.dynamicPublishData = res.data
      const _xData = {}
      if (type === 'day') {
        [-6, 5, -4, -3, -2, -1, 0].forEach(item => {
          const _time = getDay(item)
          _xData[_time] = 0
        })
      } else if (type === 'month') {
        for (let i = 1; i < 13; i++) {
          const _time = new Date().getFullYear()
          _xData[`${_time}-${i < 10 ? '0' + i : i}`] = 0
        }
      } else if (!type) {
        let num = 0
        while (getDay(num, this.value1[0]) !== this.value1[1]) {
          _xData[getDay(num, this.value1[0])] = 0
          num++
        }
        _xData[ this.value1[1]] = 0
      }
      this.totalNum = 0
      res.data.forEach(item => {
        this.totalNum += item.total
        _xData[item.date] = item.total
      })
      this.render1(_xData)
    },
    render1(_xData) {
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: Object.keys(_xData)
        },
        yAxis: {
          boundaryGap: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          type: 'value'
        },
        series: [{
          lineStyle: {
            color: '#1890FF'
          },
          itemStyle: {
            color: '#1890FF'
          },
          data: Object.keys(_xData).map(item => _xData[item]),
          type: 'line',
          smooth: true,
          areaStyle: {
            color: '#1890FF',
            opacity: 0.3
          }
        }]
      }
      this.renderCanva('canvas1', option)
    },
    async getDynamicCurveData(type) {
      const params = {}
      if (type) params.type = type
      else params.date = this.value2.join(',')
      const [res] = await this.$async(dynamicCurveData, params)
      const { browse , comment, forward} = res.data
      this.dynamicCurveData = [...browse,...comment,...forward]
      
      const _xData = {}
      if (type === 'day') {
        [-6, -5, -4, -3, -2, -1, 0].forEach(item => {
          const _time = getDay(item)
          _xData[_time] = 0
        })
      } else if (type === 'month') {
        for (let i = 1; i < 13; i++) {
          const _time = new Date().getFullYear()
          _xData[`${_time}-${i < 10 ? '0' + i : i}`] = 0
        }
      }else if(type==='year'){
        for (let i = 1; i < 13; i++) {
          const _time = new Date().getFullYear()
          _xData[_time] = 0
        }
      }else if (!type) {
        let num = 0
        while (getDay(num, this.value2[0]) !== this.value2[1]) {
          _xData[getDay(num, this.value2[0])] = 0
          num++
        }
        _xData[this.value2[1]] = 0
      }
      const browseDatas = JSON.parse(JSON.stringify(_xData))
      this.totalBrowse = 0 
      res.data.browse.forEach(item2 => {
        if (item2.date in browseDatas) {
          browseDatas[item2.date] = item2.total
        }
        this.totalBrowse += item2.total
      })
      const commentDatas = JSON.parse(JSON.stringify(_xData))
      this.totalComment = 0
      res.data.comment.forEach(item2 => {
        if (item2.date in commentDatas) {
          commentDatas[item2.date] = item2.total
        }
        this.totalComment += item2.total
      })
      const forwardDatas = JSON.parse(JSON.stringify(_xData))
      this.totalForward = 0
      res.data.forward.forEach(item2 => {
        if (item2.date in forwardDatas) {
          forwardDatas[item2.date] = item2.total
        }
        this.totalForward += item2.total
      })
      const likeDatas = JSON.parse(JSON.stringify(_xData))
      this.totalLike = 0
      res.data.like.forEach(item2 => {
        if (item2.date in likeDatas) {
          likeDatas[item2.date] = item2.total
        }
        this.totalLike += item2.total
      })
      this.render2(_xData, [browseDatas, commentDatas, forwardDatas, likeDatas])
    },
    render2(_xData, data) {
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: Object.keys(_xData)
        },
        yAxis: {
          boundaryGap: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          type: 'value'
        },
        series: data.map((item, index) =>
          ({
            lineStyle: {
              color: this.color[index]
            },
            itemStyle: {
              color: this.color[index]
            },
            data: Object.keys(item).map(key => item[key]),
            type: 'line',
            smooth: true,
            areaStyle: {
              color: this.color[index],
              opacity: 0.3
            }
          })
        )
      }
      
      this.renderCanva('canvas2', option)
    },
    renderCanva(name, option) {
      const myChart = echarts.init(this.$refs[name])
      myChart.setOption(option)
    }
  }
}
</script>

<style  scoped>
.s1{
  color: rgba(0, 0, 0, 0.42745);
  font-size: 14px;
}
.s2{
  color: rgba(0, 0, 0, 0.847058);
  font-size: 24px;
  margin-top: 5px;
}
.s3{
  color: rgba(0, 0, 0, 0.42745);
  font-size: 14px;
  margin-left: 40px;
}
.s4{
  color: #2fc25b;
  font-size: 18px;
}
.box1{
  height: 25px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.c1{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: red;
  margin-right: 50px;
}
.c2{
  color: rgba(0, 0, 0, 0.647058);
  font-size: 13px;
  padding-right: 20px;
}
.c3{
  color: rgba(0, 0, 0, 0.42745);
  font-size: 13px;
  /* margin-left: 30px;
  margin-right: 80px; */
}
.c4{
  color: rgba(0, 0, 0, 0.647058);
  font-size: 13px;
  padding-right: 20px;
  line-height: 25px;
}
.tr /deep/ .el-range-editor.el-input__inner{
    width: 260px!important;
}
.tr /deep/ .el-input__icon.el-range__close-icon{
    display: none;
}
.h100{
    height: 100%;
    position: relative;
}
.pos{
    position: absolute;
    z-index: 9;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    color: #828282;
    font-size: 14px;
}
.el-button{
    height: 34px;
    line-height: 34px;
    padding: 0 10px;
    box-sizing: border-box;
}
.flex{
    display: flex;
}
.ac{
  align-items: center;
}
.pc{
  justify-content: center;
}
.pe{
  justify-content: space-around;
}
.ver{
  flex-direction: column;
}
.f1{
    flex: 1;
}
.page{
    padding: 15px;
    background: #FFFFFF;
}
.top{
    box-sizing: border-box;
    padding: 0 15px;
    height: 50px;
    line-height: 50px;
    background-color: #f2f2f2;
    border: 1px solid #e9e9e9;
}
.tr{
    text-align: right;
}
.sel{
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid #1890ff;
    color: #1890ff;
    border-radius: 5px;
    height: 34px;
    line-height: 34px;
    margin: 0 20px 0 40px;
}
.sel span{
    padding: 0 20px;
    display: inline-block;
    height: 100%;
    cursor:pointer;
}
.br{
    border-left: 1px solid #1890ff;
    border-right: 1px solid #1890ff;
}
.canvas-box{
    border: 1px solid #e9e9e9;
    border-top: none;
    box-sizing: border-box;
    padding: 0 20px;
}
.h1{
  height: 300px;
}
.h2{
  height: 500px;
}
</style>
